<template>
  <!--<el-row style="background:#ddd;min-height: 850px;" id="drag_div">-->
  <!--<el-col :span="16" style="padding-right: 2px;" class="drag_item">-->
  <!--<video-player class="video-player-box "-->
  <!--ref="videoPlayer"-->
  <!--:options="playerOptions"-->
  <!--:playsinline="true"-->
  <!--customEventName="customstatechangedeventname"-->

  <!--@play="onPlayerPlay($event)"-->
  <!--@pause="onPlayerPause($event)"-->
  <!--@ended="onPlayerEnded($event)"-->
  <!--@waiting="onPlayerWaiting($event)"-->
  <!--@playing="onPlayerPlaying($event)"-->
  <!--@loadeddata="onPlayerLoadeddata($event)"-->
  <!--@timeupdate="onPlayerTimeupdate($event)"-->
  <!--@canplay="onPlayerCanplay($event)"-->
  <!--@canplaythrough="onPlayerCanplaythrough($event)"-->

  <!--@statechanged="playerStateChanged($event)"-->
  <!--@ready="playerReadied">-->
  <!--</video-player>-->
  <!--</el-col>-->
  <!--<el-col :span="8" style="padding: 2px;">-->
  <!--<el-col class="drag_item">-->
  <!--<video-player class="video-player-box "-->
  <!--ref="videoPlayer"-->
  <!--:options="playerOptions"-->
  <!--:playsinline="true"-->
  <!--customEventName="customstatechangedeventname"-->
  <!--@play="onPlayerPlay($event)"-->
  <!--@pause="onPlayerPause($event)"-->
  <!--@ended="onPlayerEnded($event)"-->
  <!--@waiting="onPlayerWaiting($event)"-->
  <!--@playing="onPlayerPlaying($event)"-->
  <!--@loadeddata="onPlayerLoadeddata($event)"-->
  <!--@timeupdate="onPlayerTimeupdate($event)"-->
  <!--@canplay="onPlayerCanplay($event)"-->
  <!--@canplaythrough="onPlayerCanplaythrough($event)"-->

  <!--@statechanged="playerStateChanged($event)"-->
  <!--@ready="playerReadied">-->
  <!--</video-player>-->
  <!--</el-col>-->
  <!--<el-col class="drag_item">-->
  <!--<video-player class="video-player-box "-->
  <!--ref="videoPlayer"-->
  <!--:options="playerOptions"-->
  <!--:playsinline="true"-->
  <!--customEventName="customstatechangedeventname"-->

  <!--@play="onPlayerPlay($event)"-->
  <!--@pause="onPlayerPause($event)"-->
  <!--@ended="onPlayerEnded($event)"-->
  <!--@waiting="onPlayerWaiting($event)"-->
  <!--@playing="onPlayerPlaying($event)"-->
  <!--@loadeddata="onPlayerLoadeddata($event)"-->
  <!--@timeupdate="onPlayerTimeupdate($event)"-->
  <!--@canplay="onPlayerCanplay($event)"-->
  <!--@canplaythrough="onPlayerCanplaythrough($event)"-->

  <!--@statechanged="playerStateChanged($event)"-->
  <!--@ready="playerReadied">-->
  <!--</video-player>-->
  <!--</el-col>-->
  <!--</el-col>-->
  <!--<el-col :span="8" style="padding-right: 2px;" class="drag_item">-->
  <!--<video-player class="video-player-box "-->
  <!--ref="videoPlayer"-->
  <!--:options="playerOptions"-->
  <!--:playsinline="true"-->
  <!--customEventName="customstatechangedeventname"-->

  <!--@play="onPlayerPlay($event)"-->
  <!--@pause="onPlayerPause($event)"-->
  <!--@ended="onPlayerEnded($event)"-->
  <!--@waiting="onPlayerWaiting($event)"-->
  <!--@playing="onPlayerPlaying($event)"-->
  <!--@loadeddata="onPlayerLoadeddata($event)"-->
  <!--@timeupdate="onPlayerTimeupdate($event)"-->
  <!--@canplay="onPlayerCanplay($event)"-->
  <!--@canplaythrough="onPlayerCanplaythrough($event)"-->

  <!--@statechanged="playerStateChanged($event)"-->
  <!--@ready="playerReadied">-->
  <!--</video-player>-->
  <!--</el-col>-->
  <!--<el-col :span="8" style="padding-left: 2px;padding-right: 2px;" class="drag_item">-->
  <!--<video-player class="video-player-box "-->
  <!--ref="videoPlayer"-->
  <!--:options="playerOptions"-->
  <!--:playsinline="true"-->
  <!--customEventName="customstatechangedeventname"-->

  <!--@play="onPlayerPlay($event)"-->
  <!--@pause="onPlayerPause($event)"-->
  <!--@ended="onPlayerEnded($event)"-->
  <!--@waiting="onPlayerWaiting($event)"-->
  <!--@playing="onPlayerPlaying($event)"-->
  <!--@loadeddata="onPlayerLoadeddata($event)"-->
  <!--@timeupdate="onPlayerTimeupdate($event)"-->
  <!--@canplay="onPlayerCanplay($event)"-->
  <!--@canplaythrough="onPlayerCanplaythrough($event)"-->

  <!--@statechanged="playerStateChanged($event)"-->
  <!--@ready="playerReadied">-->
  <!--</video-player>-->
  <!--</el-col>-->
  <!--<el-col :span="8" style="padding-left: 2px;" class="drag_item">-->
  <!--<video-player class="video-player-box "-->
  <!--ref="videoPlayer"-->
  <!--:options="playerOptions"-->
  <!--:playsinline="true"-->
  <!--customEventName="customstatechangedeventname"-->

  <!--@play="onPlayerPlay($event)"-->
  <!--@pause="onPlayerPause($event)"-->
  <!--@ended="onPlayerEnded($event)"-->
  <!--@waiting="onPlayerWaiting($event)"-->
  <!--@playing="onPlayerPlaying($event)"-->
  <!--@loadeddata="onPlayerLoadeddata($event)"-->
  <!--@timeupdate="onPlayerTimeupdate($event)"-->
  <!--@canplay="onPlayerCanplay($event)"-->
  <!--@canplaythrough="onPlayerCanplaythrough($event)"-->

  <!--@statechanged="playerStateChanged($event)"-->
  <!--@ready="playerReadied">-->
  <!--</video-player>-->
  <!--</el-col>-->
  <!--<el-col :span="8" style="padding-left: 2px;" class="drag_item">-->
  <!--<video-player class="video-player-box "-->
  <!--ref="videoPlayer"-->
  <!--:options="playerOptions"-->
  <!--:playsinline="true"-->
  <!--customEventName="customstatechangedeventname"-->

  <!--@play="onPlayerPlay($event)"-->
  <!--@pause="onPlayerPause($event)"-->
  <!--@ended="onPlayerEnded($event)"-->
  <!--@waiting="onPlayerWaiting($event)"-->
  <!--@playing="onPlayerPlaying($event)"-->
  <!--@loadeddata="onPlayerLoadeddata($event)"-->
  <!--@timeupdate="onPlayerTimeupdate($event)"-->
  <!--@canplay="onPlayerCanplay($event)"-->
  <!--@canplaythrough="onPlayerCanplaythrough($event)"-->

  <!--@statechanged="playerStateChanged($event)"-->
  <!--@ready="playerReadied">-->
  <!--</video-player>-->
  <!--</el-col>-->
  <!--<el-col :span="8" style="padding-left: 2px;" class="drag_item">-->
  <!--<video-player class="video-player-box "-->
  <!--ref="videoPlayer"-->
  <!--:options="playerOptions"-->
  <!--:playsinline="true"-->
  <!--customEventName="customstatechangedeventname"-->

  <!--@play="onPlayerPlay($event)"-->
  <!--@pause="onPlayerPause($event)"-->
  <!--@ended="onPlayerEnded($event)"-->
  <!--@waiting="onPlayerWaiting($event)"-->
  <!--@playing="onPlayerPlaying($event)"-->
  <!--@loadeddata="onPlayerLoadeddata($event)"-->
  <!--@timeupdate="onPlayerTimeupdate($event)"-->
  <!--@canplay="onPlayerCanplay($event)"-->
  <!--@canplaythrough="onPlayerCanplaythrough($event)"-->

  <!--@statechanged="playerStateChanged($event)"-->
  <!--@ready="playerReadied">-->
  <!--</video-player>-->
  <!--</el-col>-->
  <!--<el-col :span="8" style="padding-left: 2px;" class="drag_item">-->
  <!--<video-player class="video-player-box "-->
  <!--ref="videoPlayer"-->
  <!--:options="playerOptions"-->
  <!--:playsinline="true"-->
  <!--customEventName="customstatechangedeventname"-->

  <!--@play="onPlayerPlay($event)"-->
  <!--@pause="onPlayerPause($event)"-->
  <!--@ended="onPlayerEnded($event)"-->
  <!--@waiting="onPlayerWaiting($event)"-->
  <!--@playing="onPlayerPlaying($event)"-->
  <!--@loadeddata="onPlayerLoadeddata($event)"-->
  <!--@timeupdate="onPlayerTimeupdate($event)"-->
  <!--@canplay="onPlayerCanplay($event)"-->
  <!--@canplaythrough="onPlayerCanplaythrough($event)"-->

  <!--@statechanged="playerStateChanged($event)"-->
  <!--@ready="playerReadied">-->
  <!--</video-player>-->
  <!--</el-col>-->
  <!--</el-row>-->

  <div class="container" id="drag_div">
    <div class="row">
      <div class="col-md-8" style="margin: auto">
        <div class="panel panel-default"  @drop='drop($event)' @dragover="allowDrop($event)" draggable="true"
             @dragstart="drag($event)">
          <div class="panel-heading">
            <h3 class="panel-title">
              <span class="glyphicon glyphicon-th-list"></span> 摄像头一</h3>
          </div>
          <div class="panel-body " >
            <!--//添加Vue绑定的Dom-->
            <video-player class="video-player-box"
                          ref="videoPlayer"
                          :options="playerOptions"
                          :playsinline="true"
                          customEventName="customstatechangedeventname"
                          @play="onPlayerPlay($event)"
                          @pause="onPlayerPause($event)"
                          @ended="onPlayerEnded($event)"
                          @waiting="onPlayerWaiting($event)"
                          @playing="onPlayerPlaying($event)"
                          @loadeddata="onPlayerLoadeddata($event)"
                          @timeupdate="onPlayerTimeupdate($event)"
                          @canplay="onPlayerCanplay($event)"
                          @canplaythrough="onPlayerCanplaythrough($event)"

                          @statechanged="playerStateChanged($event)"
                          @ready="playerReadied">
            </video-player>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="panel panel-default" @drop='drop($event)' @dragover="allowDrop($event)" draggable="true"
             @dragstart="drag($event)">
          <div class="panel-heading">
            <h3 class="panel-title">
              <span class="glyphicon glyphicon-th-list"></span> 摄像头二</h3>
          </div>
          <div class="panel-body">
            <video-player class="video-player-box"
                          ref="videoPlayer"
                          :options="playerOptions"
                          :playsinline="true"
                          customEventName="customstatechangedeventname"

                          @play="onPlayerPlay($event)"
                          @pause="onPlayerPause($event)"
                          @ended="onPlayerEnded($event)"
                          @waiting="onPlayerWaiting($event)"
                          @playing="onPlayerPlaying($event)"
                          @loadeddata="onPlayerLoadeddata($event)"
                          @timeupdate="onPlayerTimeupdate($event)"
                          @canplay="onPlayerCanplay($event)"
                          @canplaythrough="onPlayerCanplaythrough($event)"

                          @statechanged="playerStateChanged($event)"
                          @ready="playerReadied">
            </video-player>
          </div>
        </div>
        <div class="panel panel-default" @drop='drop($event)' @dragover="allowDrop($event)" draggable="true"
             @dragstart="drag($event)">
          <div class="panel-heading">
            <h3 class="panel-title">
              <span class="glyphicon glyphicon-th-list"></span> 摄像头三</h3>
          </div>
          <div class="panel-body">
            <video-player class="video-player-box"
                          ref="videoPlayer"
                          :options="playerOptions"
                          :playsinline="true"
                          customEventName="customstatechangedeventname"

                          @play="onPlayerPlay($event)"
                          @pause="onPlayerPause($event)"
                          @ended="onPlayerEnded($event)"
                          @waiting="onPlayerWaiting($event)"
                          @playing="onPlayerPlaying($event)"
                          @loadeddata="onPlayerLoadeddata($event)"
                          @timeupdate="onPlayerTimeupdate($event)"
                          @canplay="onPlayerCanplay($event)"
                          @canplaythrough="onPlayerCanplaythrough($event)"

                          @statechanged="playerStateChanged($event)"
                          @ready="playerReadied">
            </video-player>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="panel panel-default" @drop='drop($event)' @dragover="allowDrop($event)" draggable="true"
             @dragstart="drag($event)">
          <div class="panel-heading">
            <h3 class="panel-title">
              <span class="glyphicon glyphicon-th-list"></span> 摄像头四</h3>
          </div>
          <div class="panel-body">
            <video-player class="video-player-box"
                          ref="videoPlayer"
                          :options="playerOptions"
                          :playsinline="true"
                          customEventName="customstatechangedeventname"

                          @play="onPlayerPlay($event)"
                          @pause="onPlayerPause($event)"
                          @ended="onPlayerEnded($event)"
                          @waiting="onPlayerWaiting($event)"
                          @playing="onPlayerPlaying($event)"
                          @loadeddata="onPlayerLoadeddata($event)"
                          @timeupdate="onPlayerTimeupdate($event)"
                          @canplay="onPlayerCanplay($event)"
                          @canplaythrough="onPlayerCanplaythrough($event)"

                          @statechanged="playerStateChanged($event)"
                          @ready="playerReadied">
            </video-player>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="panel panel-default" @drop='drop($event)' @dragover="allowDrop($event)" draggable="true"
             @dragstart="drag($event)">
          <div class="panel-heading">
            <h3 class="panel-title">
              <span class="glyphicon glyphicon-th-list"></span> 摄像头五</h3>
          </div>
          <div class="panel-body">
            <video-player class="video-player-box"
                          ref="videoPlayer"
                          :options="playerOptions"
                          :playsinline="true"
                          customEventName="customstatechangedeventname"

                          @play="onPlayerPlay($event)"
                          @pause="onPlayerPause($event)"
                          @ended="onPlayerEnded($event)"
                          @waiting="onPlayerWaiting($event)"
                          @playing="onPlayerPlaying($event)"
                          @loadeddata="onPlayerLoadeddata($event)"
                          @timeupdate="onPlayerTimeupdate($event)"
                          @canplay="onPlayerCanplay($event)"
                          @canplaythrough="onPlayerCanplaythrough($event)"

                          @statechanged="playerStateChanged($event)"
                          @ready="playerReadied">
            </video-player>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="panel panel-default" @drop='drop($event)' @dragover="allowDrop($event)" draggable="true"
             @dragstart="drag($event)">
          <div class="panel-heading">
            <h3 class="panel-title">
              <span class="glyphicon glyphicon-th-list"></span> 摄像头六</h3>
          </div>
          <div class="panel-body">
            <video-player class="video-player-box"
                          ref="videoPlayer"
                          :options="playerOptions"
                          :playsinline="true"
                          customEventName="customstatechangedeventname"

                          @play="onPlayerPlay($event)"
                          @pause="onPlayerPause($event)"
                          @ended="onPlayerEnded($event)"
                          @waiting="onPlayerWaiting($event)"
                          @playing="onPlayerPlaying($event)"
                          @loadeddata="onPlayerLoadeddata($event)"
                          @timeupdate="onPlayerTimeupdate($event)"
                          @canplay="onPlayerCanplay($event)"
                          @canplaythrough="onPlayerCanplaythrough($event)"

                          @statechanged="playerStateChanged($event)"
                          @ready="playerReadied">
            </video-player>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {initdrag} from '../assets/drag_js/tuozhuai.js'
  import 'video.js/dist/video-js.css'
  import {videoPlayer} from 'vue-video-player'
  // Similarly, you can also introduce the plugin resource pack you want to use within the component
  // import 'some-videojs-plugin'
  export default {
    data() {
      return {
        playerOptions: {
          // videojs options
          autoplay: true,
          muted: true,
          language: 'en',
          playbackRates: [0.7, 1.0, 1.5, 2.0],
          aspectRatio: '16:9',
          sources: [{
            type: "video/mp4",
            src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
          }],
          poster: "/static/images/author.jpg",
        },
        dom1: null,
        dom2: null,
      }
    },
    mounted() {
      console.log('this is current player instance object', this.player);
      initdrag();
    },
    computed: {
      player() {
        return this.$refs.videoPlayer.player
      }
    },
    methods: {
      // listen event
      onPlayerPlay(player) {
        // console.log('player play!', player)
      },
      onPlayerPause(player) {
        // console.log('player pause!', player)
      },
      onPlayerEnded(player) {
        // console.log('player ended!', player)
      },
      onPlayerLoadeddata(player) {
        // console.log('player Loadeddata!', player)
      },
      onPlayerWaiting(player) {
        // console.log('player Waiting!', player)
      },
      onPlayerPlaying(player) {
        // console.log('player Playing!', player)
      },
      onPlayerTimeupdate(player) {
        // console.log('player Timeupdate!', player.currentTime())
      },
      onPlayerCanplay(player) {
        // console.log('player Canplay!', player)
      },
      onPlayerCanplaythrough(player) {
        // console.log('player Canplaythrough!', player)
      },
      // or listen state event
      playerStateChanged(playerCurrentState) {
        // console.log('player current update state', playerCurrentState)
      },
      // player is ready
      playerReadied(player) {
        // seek to 10s
        console.log('example player 1 readied', player)
        player.currentTime(10)
        // console.log('example 01: the player is readied', player)
      },
      drag(event) {
        this.dom1 = event.currentTarget
      },
      drop(event) {
        event.preventDefault();
        this.dom2 = event.currentTarget;

        if (this.dom1 != this.dom2) {
          var   middle=this.dom1.innerHTML;
          this.dom1.innerHTML = this.dom2.innerHTML;
          this.dom2.innerHTML = middle;
        }

//        event.target.appendChild(this.dom)
      },
      allowDrop(event) {
        event.preventDefault()
      }
    }
  }
</script>
<style>
  /*.drag_item {*/
    /*width: 100%;*/
    /*height: 100%;*/
  /*}*/

  .el-header, .el-footer {
    /*background-color: #B3C0D1;*/
    /*color: #333;*/
    text-align: center;
    line-height: 200px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 400px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 400px;
  }

  .img_100 img {
    width: 100%;
    max-width: 100%;
  }

  .margin_bottom_15 {
    margin-bottom: 15px;
  }

  .text_center {
    text-align: center;
  }

  .drag_div {
    width: 1300px;
    height: 760px;
    overflow: hidden;
    position: relative;
  }

  .drag_div > div {
    background: #fff;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
  }

  .drag_div > div.one {
    position: absolute;
    top: 0;
    left: 0;
    width: 20%;
    height: 240px;
  }

  .drag_div > div.two {
    position: absolute;
    top: 260px;
    left: 0;
    width: 20%;
    height: 240px;
  }

  .drag_div > div.three {
    position: absolute;
    top: 520px;
    left: 0;
    width: 20%;
    height: 240px;
  }

  .drag_div > div.four {
    position: absolute;
    top: 0px;
    left: 21%;
    width: 37%;
    height: 760px;
  }

  .drag_div > div.five {
    position: absolute;
    top: 0px;
    left: 59%;
    width: 20%;
    height: 280px;
  }

  .drag_div > div.six {
    position: absolute;
    top: 300px;
    left: 59%;
    width: 20%;
    height: 220px;
  }

  .drag_div > div.seven {
    position: absolute;
    top: 540px;
    left: 59%;
    width: 20%;
    height: 220px;
  }

  .drag_div > div.eight {
    position: absolute;
    top: 0px;
    left: 80%;
    width: 20%;
    height: 280px;
  }

  .drag_div > div.nine {
    position: absolute;
    top: 300px;
    left: 80%;
    width: 20%;
    height: 220px;
  }

  .drag_div > div.ten {
    position: absolute;
    top: 540px;
    left: 80%;
    width: 20%;
    height: 220px;
  }

  .drag_div > div.one img, .drag_div > div.two img, .drag_div > div.three img {
    width: 100%;
    height: 180px;
  }

  .drag_div > div.four img {
    width: 100%;
    height: 700px;
  }

  .drag_div > div.five img, .drag_div > div.eight img {
    width: 100%;
    height: 220px;
  }

  .drag_div > div.six img, .drag_div > div.seven img, .drag_div > div.nine img, .drag_div > div.ten img {
    width: 100%;
    height: 160px;
  }

  /*body > .el-container {*/
  /*margin-bottom: 20px;*/
  /*}*/
</style>
